<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.prime.com.tr/ui" template="template.xhtml">

	<ui:define name="head">

		<script src="http://maps.google.com/maps/api/js?sensor=false"
			type="text/javascript"></script>
		<script type="text/javascript">
			var currentMarker = null;

			function handlePointClick(event) {
				if (currentMarker == null) {
					document.getElementById('lat').value = event.latLng.lat();
					document.getElementById('lng').value = event.latLng.lng();

					currentMarker = new google.maps.Marker({
						position : new google.maps.LatLng(event.latLng.lat(),
								event.latLng.lng())
					});

					map.addOverlay(currentMarker);

					dlg.show();
				}
			}

			function markerAddComplete() {
				var title = document.getElementById('title');
				currentMarker.setTitle(title.value);
				title.value = "";

				currentMarker = null;
				dlg.hide();
			}

			function cancel() {
				dlg.hide();
				currentMarker.setMap(null);
				currentMarker = null;

				return false;
			}
		</script>


	</ui:define>
	<ui:define name="content">

		<p>Este es un mapa ui composition</p>

		<p:panel>
			<h:form>

				<p:growl id="messages" showDetail="true" life="2000" />

				<p:gmap center="41.381542, 2.122893" zoom="15" type="HYBRID"
					style="width:600px;height:400px"
					stateChangeListener="#{mapBean.onStateChange}"
					onStateChangeUpdate="messages"
					pointSelectListener="#{mapBean.onPointSelect}"
					onPointSelectUpdate="messages" />

				<br />
				<p:commandButton value="Cancel" onclick="return cancel()" />

			</h:form>
		</p:panel>



	</ui:define>

</ui:composition>
